<template>
  <div class="quality-task-table-container">
    <!-- 搜索和重置 -->
    <!-- <div class="search-header">
      <el-input
        v-model="searchQuery"
        placeholder="请输入内容"
        class="search-input"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div> -->

    <el-table
      :data="tableData"
      style="width: 100%"
      class="dark-table"
      :header-cell-style="{
        backgroundColor: 'rgb(15, 53, 115)',
        color: '#91caf6',
      }"
      :cell-style="{
        backgroundColor: 'rgb(10, 43, 94)',
        color: '#91caf6',
      }"
      :row-style="{ height: '25px' }"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column
        v-for="item in arr || []"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      />
      <!-- QueryConfig -->
      <!-- <el-table-column prop="tableName" label="名称" />
      <el-table-column prop="district" label="所属区县" />
      <el-table-column prop="deviceName" label="设备名称" />
      <el-table-column prop="deviceCategory" label="设备类别" />
      <el-table-column prop="deviceStatus" label="设备状态" /> -->
    </el-table>

    <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="arr.length"
                @current-change="handleCurrentChange" background class="dark-pagination" />
        </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,onUpdated } from "vue";
import { Search } from "@element-plus/icons-vue";
import request from "@/request/index";

const props = defineProps({
  QueryConfig: {
    type: Object,
    default: () => ({
      url: "/api/zjjscApi/datasource/getSjkslMx",
      method: "get",
      params: {},
      data: {},
      columns: [
        {
          prop: "serialNumber",
          label: "序号",
          width: "80",
        },
        {
          prop: "databaseName",
          label: "名称",
          width: "80",
        },
        {
          prop: "type",
          label: "数据库",
          width: "80",
        },
      ],
    }),
    required: true,
  },
  fathUrl: {
    type: String,
    default: "",
  },
  arr: {
    type: Array,
    default: () => [],
  },
});

// 搜索关键词
const searchQuery = ref("");
// 当前页码
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(5);
const pagetotal = ref(0);

// 表格数据源
const tableData = ref([
  {
    serialNumber: "1",
    name: "设备A",
    district: "区县A",
    deviceName: "设备名称A",
    deviceCategory: "类别A",
    deviceStatus: "正常",
  },
  {
    serialNumber: "2",
    name: "设备B",
    district: "区县B",
    deviceName: "设备名称B",
    deviceCategory: "类别B",
    deviceStatus: "异常",
  },
  {
    serialNumber: "3",
    name: "设备C",
    district: "区县C",
    deviceName: "设备名称C",
    deviceCategory: "类别C",
    deviceStatus: "正常",
  },
]);

const filteredData = computed(() => {
  return tableData.value.filter((item) => {
    return Object.values(item).some((val) =>
      String(val).toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  });
});

// const currentPageData = computed(() => {
//   const startIndex = (currentPage.value - 1) * pageSize.value;
//   const endIndex = startIndex + pageSize.value;
//   return filteredData.value.slice(startIndex, endIndex);
// });

const handleSearch = () => {
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleReset = () => {
  searchQuery.value = "";
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  QueryTAbsInit();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  QueryTAbsInit();
};
const QueryTAbsInit = () => {
  tableData.value = []; // 清空表格数据
  request({
    url: props.QueryConfig.url,
    method: "get",
    params: {
      pageNumber: currentPage.value,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res, "查询数据");
    
    tableData.value = res.data.records?res.data.records:res.data;
    pagetotal.value = res.data.records.length?res.data.records.length:res.data.length;
  });
};
onMounted(() => {
  props.QueryConfig.url = props.fathUrl;
  console.log(props.QueryConfig, "处理事件1111>>>>>>>>>>>>>>>>>",props.fathUrl);
  QueryTAbsInit();
});
</script>


<style scoped>
    .quality-task-table-container {
        background-color: rgb(15, 53, 115);
        color: #91caf6;
        overflow-y: auto;
        height: 100%;
        padding: 10px;
    }

    .search-header {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .search-input {
        width: 200px;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.dark-table) {
        height: 80%;
        background: rgb(10, 43, 94);
        --el-table-border-color: rgb(10, 43, 94);
        --el-table-border: 1px solid var(--el-table-border-color);
        --el-table-text-color: #91caf6;
        --el-table-header-text-color: #91caf6;
        --el-table-row-hover-bg-color: rgb(14, 51, 112);
    }

    :deep(.dark-pagination) {
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: #91caf6;
        --el-pagination-border-color: rgb(10, 43, 94);
        --el-pagination-hover-color: #409eff;
        --el-pagination-button-bg-color: transparent;
    }

    :deep(.el-button) {
        --el-button-bg-color: transparent;
        --el-button-border-color: #91caf6;
        --el-button-hover-bg-color: rgba(145, 202, 246, 0.1);
        --el-button-hover-border-color: #91caf6;
        --el-button-active-bg-color: rgba(145, 202, 246, 0.2);
        --el-button-text-color: #91caf6;
    }

    :deep(.el-button--primary) {
        --el-button-bg-color: rgba(64, 158, 255, 0.1);
        --el-button-border-color: #409eff;
        --el-button-hover-bg-color: rgba(64, 158, 255, 0.2);
        --el-button-hover-border-color: #409eff;
        --el-button-active-bg-color: rgba(64, 158, 255, 0.3);
        --el-button-text-color: #409eff;
    }

    :deep(.el-input) {
        --el-input-bg-color: transparent;
        --el-input-border-color: #91caf6;
        --el-input-text-color: #91caf6;
        --el-input-placeholder-color: rgba(145, 202, 246, 0.5);
    }

    /* 修改未点击时的数字方块背景颜色 */
    /* :deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
    background-color: #75fbff !important;
  } */
    /* 未点击时的数字方块背景颜色 */
    :deep .el-pagination .el-pager li:not(.active):not(.disabled) {
        background-color: #0e3a90 !important;
        color: #75fbff;
    }

    :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
        background-color: #75fbff !important;
        color: #01133c;
    }
</style>
